<template>
  <div :style="boxStyle" class="pdb15">
    <el-button v-if="showDel" type="primary" size="mini" @click="del">批量删除</el-button>
    <el-button v-if="showCreate" type="primary" size="mini" @click="addNew">添加</el-button>
    <el-button v-if="showUpload" type="primary" size="mini" @click="upload">导入</el-button>
    <el-button v-if="showExport" type="primary" size="mini" icon="el-icon-download" @click="handleDownload">导出
    </el-button>
    <el-button v-if="showGroupSend" type="primary" size="mini" @click="sendMessage">群发短信</el-button>
    <el-button v-if="showGroupManage" type="primary" size="mini" @click="groupManage">分组管理</el-button>

  </div>
</template>

<script>
export default {
  name: 'BtnsAboveTable',
  props: {
    showCreate: {
      type: Boolean,
      default: false
    },
    showUpload: {
      type: Boolean,
      default: false
    },
    showExport: {
      type: Boolean,
      default: true
    },
    showDel: {
      type: Boolean,
      default: false
    },
    showGroupSend: {
      type: Boolean,
      default: false
    },
    showGroupManage: {
      type: Boolean,
      default: false
    },
    tableTitle: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    },
    boxStyle: {
      type: String
    }
  },
  data() {
    return {
      // 导出excel
      downloadLoading: false,
      filename: '导出文件'
    }
  },
  methods: {
    upload() {
      this.$router.push({
        name: 'upload'
      })
    },
    addNew() {
      this.$emit('addNew')
    },
    sendMessage() {
      this.$emit('sendmessage')
    },
    groupManage() {
      this.$emit('groupManage')
    },
    del() {
      this.$emit('del')
    },

    // 导出excel
    handleDownload() {
      this.downloadLoading = true
      console.log(this.tableData)
                import('@/vendor/Export2Excel').then(excel => {
                  const tHeader = this.tableTitle.map(item => item.cn)
                  const filterVal = this.tableTitle.map(item => item.en)
                  const list = this.tableData
                  const data = this.formatJson(filterVal, list)
                  excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename: this.filename,
                    autoWidth: this.autoWidth,
                    bookType: this.bookType
                  })
                  this.downloadLoading = false
                })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    }

  }
}
</script>

<style scoped>

</style>
